<template>
	<view class="container">
		<Header>学创签</Header>
		<view class="header_top">
			<!-- <view class="title">工作台</view> -->
			<view class="flex info" v-if="isLogin">
				<view class="flex" style="align-items: center;" @click="show = true">
					<view class="phone">
						{{userType == 1?contractInfo?.member?.member_info?.nick_name:contractInfo?.company.name}}
					</view>
					<view style="margin: 0 5rpx 0 10rpx;">(套餐{{userInfo.use_count}}份)</view>
					<u-icon name="arrow-down-fill" size="10" color="#333333" top="2rpx"></u-icon>
				</view>
				<view class="buy" @click="goNav('/pages/contract/purchase')">订购</view>
			</view>
			<view class="login" v-else @click="goRedirect('/pages/alogin/index')">登录</view>
		</view>
		<!-- <u-popup :safeAreaInsetBottom="false" :duration="-50" :overlayStyle="{top:'calc(100rpx + '+topHeight+'px)'}"
			:customStyle="{top:'calc(100rpx + '+topHeight+'px)'}" :show="show" :round="10" mode="top" @close="close"> -->
		<view class="shade" @click="show = false" v-if="show" :style="'top:calc(100rpx + '+topHeight+'px)'"></view>
		<view class="popupBox" v-if="show" :style="'top:calc(100rpx + '+topHeight+'px)'">
			<view @click="changeUserType(1)" v-if="contractInfo.member">
				<view class="flex">
					<view class="name">{{contractInfo.member.member_info.nick_name}}</view>
					<view class="tag tag_" v-if="contractInfo.member.certification_status == 1">
						{{contractInfo.member.certification_status_name }}
					</view>
					<view class="tag" v-else @click="show = false;goNav('/pages/my/person/Realname/index')">
						{{contractInfo.member.certification_status_name }}
					</view>
					<u-icon v-if="userType == 1" name="checkbox-mark" size="20" color="#4787F0" top="2rpx"></u-icon>
				</view>
				<view class="role">角色：个人</view>
			</view>
			<view style="margin-top: 30rpx;" @click="changeUserType(2)" v-if="contractInfo.company">
				<view class="flex">
					<view class="name">{{contractInfo.company.name}}</view>
					<u-icon v-if="userType == 2" name="checkbox-mark" size="20" color="#4787F0" top="2rpx"></u-icon>
				</view>
				<view class="role">角色：企业</view>
			</view>
			<view class="flex join" @click="joinEnter">
				<u-icon name="info-circle-fill" size="20" color="#4787F0" top="2rpx"></u-icon>
				<view>立即创建企业</view>
			</view>
		</view>
		<!-- </u-popup> -->
		<view class="main">
			<view class="num flex">
				<view class="li border" @click="toContract(1)" v-if="contractInfo.pendingCount!=undefined || !isLogin">
					<view class="num_r">{{contractInfo.pendingCount || 0}}</view>
					<view>待签署</view>
				</view>
				<view class="li" @click="toContract(4)" v-if="contractInfo.signedCount!=undefined ||!isLogin">
					<view class="num_b">{{contractInfo.signedCount || 0}}</view>
					<view>已签署</view>
				</view>
				<view class="li" @click="goNav('/pages/my/toexamine/index?type=1')"
					v-if="contractInfo.auditHandleCount!=undefined">
					<view class="num_b">{{contractInfo.auditHandleCount}}</view>
					<view>待审批</view>
				</view>
			</view>
			<scroll-view :style="'height: calc(100vh - 540rpx - '+topHeight+'px)'" type="list" scroll-y>
				<view class="ad" v-if="banner.length>0">
					<view class="ad-img">
						<u-swiper @click="bannerClick" bg-color="#FAFAFA" height="200rpx" :display-multiple-items="1"
							:list="banner" key-name="image" :indicator="true" indicatorMode="line"></u-swiper>
					</view>
				</view>
				<view class="ctit">常用工具</view>
				<view class="contract flex" @click="goSwitchTab('/pages/article/index')">
					<img class="icon" src="@/static/images/contract1.png" alt="">
					<view>
						<view class="t1">合同范本</view>
						<view class="t2">各行业合同模板</view>
					</view>
				</view>
				<view>
					<view class="flex ctit">
						<view>最近文件</view>
						<view class="more" @click="goSwitchTab('/pages/contract/index')"
							v-if="isLogin && contractInfo.contractRent && contractInfo.contractRent.length > 0">查看全部
						</view>
					</view>
					<view class="contractList"
						v-if="isLogin && contractInfo.contractRent && contractInfo.contractRent.length > 0">
						<view class="li flex" v-for="(item,index) in contractInfo.contractRent"
							@click="goNav(`${pageUrl['contractDetailUrl'][userType]}?member_contract_id=${item.member_contract_id}&signer_type=${signer_type}`)">
							<img class="icon" src="@/static/images/contract2.png" alt="">
							<view style="flex: 1;">
								<view class="flex item">
									<view class="t1">{{item.member_contract_title}}</view>
									<view class="t2 signed" v-if="item.member_contract_sign_status == 'signed'">
										{{item.member_contract_sign_status_name}}
									</view>
									<view class="t2 pending" v-if="item.member_contract_sign_status == 'pending'">
										{{item.member_contract_sign_status_name}}
									</view>
									<view class="t2 handle" v-if="item.member_contract_sign_status == 'handle'">
										{{item.member_contract_sign_status_name}}
									</view>
								</view>
								<view class="flex item">
									<view class="t3">发起人：{{item.member_contract_show_name}}</view>
									<view class="t4">{{item.member_contract_created_at}}</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="num" style="margin-top: 30rpx;">
						<u-empty text="暂无文件" mode="data"></u-empty>
					</view>
				</view>
				<view class="ctit">新闻资讯</view>
				<view class="contract flex" @click="toNews">
					<img class="icon" src="@/static/images/contract1.png" alt="">
					<view>
						<view class="t1">新闻资讯</view>
						<view class="t2">各行业的最新动态</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<Tabbar :current-page="0"></Tabbar>
	</view>
</template>
<script setup>
	import {
		memberInfo,
		getEnterpriseInfo,
		contractIndex,
		memberSwitchLogin,
		switchLogin
	} from "../../api/module/mine.js";
	import Header from "@/components/Header.vue"
	import {
		useStore
	} from 'vuex';
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive
	} from 'vue';
	import {
		arrayGet,
		arrayPluck,
		goNav,
		goRedirect,
		goSwitchTab,
		pageUrl
	} from "../../utils/common";
	import {
		bannerList,
	} from "../../api/module/home.js"
	const store = useStore()
	const topHeight = ref(0);
	const userInfo = ref({});
	const userType = ref(1);
	const isLogin = ref(true);
	const show = ref(false);
	const signer_type = ref('signer');
	const contractInfo = ref({});
	const banner = ref([]);
	const bannerArr = ref([]);
	const overlayStyle = ref({
		top: '300px'
	})
	onLoad(() => {
		getSystemInfo();
		getBannerList()
	})
	onShow(() => {
		if (uni.getStorageSync("token")) {
			getUserInfo()
			isLogin.value = true;
			userType.value = store.state.userType
			if (userType.value == 1) {
				signer_type.value = 'signer';
			} else {
				signer_type.value = 'self';
			}
		} else {
			isLogin.value = false;
		}
	})
	const getSystemInfo = () => {
		uni.getSystemInfo({
			success: res => {
				var statusBarHeight = res.statusBarHeight
				let navbar = 42;
				// #ifdef MP-WEIXIN 
				// 胶囊居中
				const custom = wx.getMenuButtonBoundingClientRect()
				navbar = custom.height + (custom.top - res.statusBarHeight) * 2
				// #endif
				topHeight.value = statusBarHeight + navbar
			}
		})
	}
	const getUserInfo = () => {
		if (store.state.userType == 1) {
			memberInfo().then(res => {
				userInfo.value = res
				if (res.id) {
					getIndex()
				}
			}).catch(err => {
				console.log(err)
			})
		} else {
			getEnterpriseInfo().then(res => {
				userInfo.value = res
				if (res.id) {
					getIndex()
				}
			}).catch(err => {
				console.log(err)
			})
		}
	}
	const close = () => {
		show.value = false;
	}
	const getIndex = () => {
		contractIndex().then(ref => {
			contractInfo.value = ref;
		})
	}
	const changeUserType = (type) => {
		if (userType.value == type) {
			return;
		}
		if (type == 1) {
			switchLogin().then(res => {
				uni.setStorageSync("token", res.token)
				uni.setStorageSync("userInfo", res.member)
				store.commit('changeUserType', type)
				userType.value = type
				close();
				getUserInfo()
				getIndex()
			});
		}
		if (type == 2) {
			memberSwitchLogin().then(res => {
				uni.setStorageSync("token", res.token)
				uni.setStorageSync("userInfo", res.user)
				store.commit('changeUserType', type)
				userType.value = type
				close();
				getUserInfo()
				getIndex()
			})
		}
	}
	const joinEnter = () => {
		if (contractInfo.value.member.certification_status != 1) {
			uni.showModal({
				title: '提示', // 标题
				content: '您尚未实名认证，请实名认证后再操作', // 内容
				cancelText: "忽略", // 取消按钮的文字
				confirmText: "去认证", // 确认按钮文字
				success(res) {
					if (res.confirm) {
						close();
						goNav('/pages/my/person/Realname/index')
						// 这里写取消操作的相关代码
					} else if (res.cancel) {
						close();
					}
				}
			});
		} else {
			close();
			goNav('/pages/my/Join-enterprise?type=2')
		}
	}
	const getBannerList = () => {
		let params = {
			platform: 'mini_program',
			position_type: 'index',
			source_type: 'jzb',
		}
		bannerList(params).then(res => {
			banner.value = arrayPluck(res, 'image');
			bannerArr.value = res;
		})
	}
	const bannerClick = (e) => {
		const type = bannerArr.value[e].is_external;
		if (type == 1) {
			uni.setStorageSync('webviewHref', bannerArr.value[e].url);
			goNav('/pages/home/webview?type=diy')
		} else {
			uni.reLaunch({
				url: bannerArr.value[e].url
			});
		}
	}
	const toNews = () => {
		uni.reLaunch({
			url: '/pages/article/index?tag=new'
		});
	}
	const toContract = (e) => {
		if (e == 1 || e == 4) {
			uni.setStorageSync('indexToContract', e)
			goSwitchTab('/pages/contract/index')
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #FAFAFA;
	}

	:deep(.header_) {
		.top-header {
			background-color: #4787F0;
		}
	}

	.shade {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 4;
	}

	.popupBox {
		padding: 30rpx;
		position: fixed;
		background-color: #fff;
		width: 100%;
		z-index: 5;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;

		.name {
			font-size: 30rpx;
		}

		.tag {
			font-size: 22rpx;
			padding: 6rpx 16rpx;
			border: 1rpx solid #999;
			color: #999;
			border-radius: 100rpx;
			margin-left: 20rpx;
		}

		.tag_ {
			color: #4787F0;
			border: 1rpx solid #4787F0;
		}

		.role {
			font-size: 26rpx;
			margin-top: 10rpx;
			color: #999;
		}

		:deep(.u-icon) {
			margin-left: 20rpx;
		}

		.join {
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #4787F0;
			margin: 40rpx 0 10rpx;
		}
	}

	.header_top {
		background-color: #fff;
		padding: 30rpx;

		.title {
			text-align: center;
			color: #000;
			font-size: 34rpx;
			font-weight: bold;
			padding-bottom: 40rpx;
		}

		.info {
			align-items: center;
			font-size: 24rpx;
			color: #999999;
			justify-content: space-between;

			.phone {
				font-weight: bold;
				font-size: 30rpx;
				color: #000;
				max-width: 350rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.buy {
				width: 140rpx;
				height: 46rpx;
				border-radius: 23rpx;
				line-height: 46rpx;
				text-align: center;
				color: #fff;
				font-size: 26rpx;
				background-color: #4787F0;
			}
		}

		.login {
			width: 140rpx;
			height: 56rpx;
			border-radius: 6rpx;
			line-height: 56rpx;
			text-align: center;
			color: #4787F0;
			border: 1rpx solid #4787F0;
			font-size: 30rpx;
			background-color: #fff;
		}
	}

	.main {
		padding: 30rpx;

		.num {
			width: 100%;
			background-color: #fff;
			text-align: center;
			padding: 40rpx 0;
			font-size: 30rpx;
			color: #666666;
			border-radius: 10rpx;
			box-shadow: 6px 6px 14px -4px rgba(0, 0, 0, 0.1);
			margin-bottom: 30rpx;

			.border {
				border-right: 1rpx solid #F2F2F2;
			}

			.li {
				// width: 50%;
				flex: 1;
				padding: 20rpx 0 10rpx;
			}

			.num_r {
				color: #FF7A42;
				font-size: 60rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.num_b {
				color: #007AFF;
				font-size: 60rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
		}

		.ctit {
			color: #000;
			font-size: 34rpx;
			font-weight: bold;
			padding: 30rpx 0;
			justify-content: space-between;
			align-items: center;
		}

		.more {
			font-weight: normal;
			font-size: 28rpx;
			color: #7A7C89;
		}

		.contract {
			width: 100%;
			height: 200rpx;
			border-radius: 10rpx;
			background-color: #fff;
			box-shadow: 6px 6px 14px -4px rgba(0, 0, 0, 0.1);
			align-items: center;
			background: url('../../static/images/contract3.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.icon {
				width: 90rpx;
				height: 90rpx;
				margin: 0 30rpx 0 20rpx;
			}

			.t1 {
				color: #000;
				font-size: 34rpx;
				font-weight: bold;
				padding-bottom: 10rpx;
			}

			.t2 {
				font-size: 28rpx;
				color: #666666;
			}
		}

		.contractList {
			.icon {
				width: 60rpx;
				height: 60rpx;
				margin-right: 15rpx;
			}

			.li {
				padding: 30rpx 40rpx;
				border-radius: 10rpx;
				background-color: #fff;
				box-shadow: 6px 6px 14px -4px rgba(0, 0, 0, 0.1);
				margin-bottom: 20rpx;

				.item {
					justify-content: space-between;
					align-items: center;
					margin-bottom: 18rpx;

					.t1 {
						font-size: 30rpx;
						font-weight: bold;
						color: #000;
					}

					.t2 {
						padding: 4rpx 10rpx;
						font-size: 26rpx;
						// font-weight: bold;
						// background-color: #DEF1FF;
						// color: #2870D2;
						border-radius: 8rpx;
					}

					.signed {
						color: #19be6b;
						border: 1rpx solid #19be6b;
					}

					.pending {
						color: #ff9900;
						border: 1rpx solid #ff9900;
					}

					.handle {
						color: #2979ff;
						border: 1rpx solid #2979ff;
					}

					.t3 {
						font-size: 28rpx;
						color: #686868;
						max-width: 270rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.t4 {
						font-size: 26rpx;
						color: #D8D8D8;
					}
				}
			}
		}
	}
</style>